<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  使用子组件-->
<!--父组件 监听子组件发射的事件-->
<!--  监听事件 调用的方法 不用写参数 默认传入item 这是在子组件中定义的 $emit("事件名称",默认传出对象)-->
<cpnx v-bind:cinfo="info" v-on:itemclick="cpnClick"></cpnx>


</div>


<!--//1 编写子组件模板-->
<template id="cpnx">
  <div>
  <h1 v-for="item in cinfo">{{item}}</h1>

    <button v-for="item in categories " @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>


  <script src="../js/vue.js"></script>
<script>

  //1 定义组件变量  子组件

  const cpnx = {
    template: '#cpnx',
    data(){
      return{
        categories:[
          {id:1111,name:'热门推荐'},
          {id:2222,name:'手机数码'},
          {id:3333,name:'家用家电'},
          {id:4444,name:'电脑办公'}
          ]
      }
    },
    props:{
      cinfo:{
        type:Object,
        default(){
          return{
            name:'xiaoliang',
            age:24,
            hobbies:['game','movie','java'],
          }

        }

      }

    },
    methods: {
      btnClick(item){
        console.log(item.id);
        // 子组件通过$emit 发射一个事件 父组件通过v-on:itemCilck=""来监听事件
        //并将item对象 传递出去 父组件接收item
         this.$emit('itemclick',item)
      }
    }
  }

  /////////////////////////////////////////////

  //父组件
  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      info:{
        name:'xiaoya',
        age:23,
        hobbies:['games','movies','python'],
      }

    },
    methods:{
      cpnClick(item){

        console.log('子组件被点击');
        console.log(item);

      }

    },
    //注册组件
    components:{
     cpnx
    }

  })
</script>
</body>
</html>